
<template>
  <div class="transport">
    <!--  -->
    <div class="tranport_Head">
      <span>危险货物道路运输运单</span>
      <!-- <span>X</span> -->
    </div>
    <!--  -->
    <div class="ydbhBox">
      <div>
        <span class="title">运单编号丨</span>
        <span style="color: rgba(255, 255, 255, 0.8);">{{ obj?.billnum || '暂无' }}</span>
      </div>
      <div v-if="obj?.state == -1"
        style="width: 70px;height: 30px;line-height: 30px;background: #00FFFC;border-radius: 5px;text-align: center;">
        编辑中</div>
      <div v-if="obj?.state == 0"
        style="width: 70px;height: 30px;line-height: 30px;background: #00FFFC;border-radius: 5px;text-align: center;">
        提交送审</div>
      <div v-if="obj?.state == 1"
        style="width: 70px;height: 30px;line-height: 30px;background: #00FFFC;border-radius: 5px;text-align: center;">
        运输中</div>
      <div v-if="obj?.state == 2"
        style="width: 70px;height: 30px;line-height: 30px;background: #00FFFC;border-radius: 5px;text-align: center;">
        已完成</div>
      <div v-if="obj?.state == 3"
        style="width: 70px;height: 30px;line-height: 30px;background: #00FFFC;border-radius: 5px;text-align: center;">
        作废</div>
      <div v-if="obj?.state == 4"
        style="width: 70px;height: 30px;line-height: 30px;background: #00FFFC;border-radius: 5px;text-align: center;">
        运单退回</div>
    </div>
    <!-- 毒害品和感染性物品 -->
    <div class="tranport-one">
      <div class="tranport-one-top">
        <div class="">
          <div class="title">毒害品和感染性物品</div>
          <div style="color:#fff;font-size: 24px;">{{ obj?.dangername }}</div>
        </div>
        <div class="flex">
          <div v-for="item, index in obj?.msdsXx?.tbxx" :key="index" class="text-center mr-[10px]">
            <img :src="item.tbdz" style="display: ;inline-block" alt="" />
            <div class="text-white">{{ item.lx }}</div>
          </div>
        </div>
      </div>
      <div class="tranport-one-bottom">
        <div>
          <span class="title">包 装 类 别丨</span>
          <span style="color: rgba(255, 255, 255, 0.8)">{{ obj?.packageLx || '暂无' }}</span>
        </div>
        <div>
          <span class="title">危险品规格丨</span>
          <span style="color: rgba(255, 255, 255, 0.8)">{{ obj?.specification || '暂无' }}</span>
        </div>
      </div>
    </div>
    <!-- 始发地 -->
    <div class="tranport-two">
      <div class="">
        <div class="w-[90px] h-[30px] bg-[#00CC99] text-[20px] leading-[30px] rounded-[5px]">始发地</div>
        <div class="text-[18px] mt-[5px]">{{ obj?.origin || '暂无' }}</div>
      </div>
      <div class="text-[#00FFFC]">
        <div class="leading-1">预计：{{ obj?.estitimeenroute || 0 }}小时</div>
        <div>---------------------------------</div>
        <div class="leading-1">{{ obj?.mileage || 0 }}km</div>
      </div>
      <div>
        <div class="w-[90px] h-[30px] bg-[#FF6666] text-[20px] leading-[30px] rounded-[5px]">目的地</div>
        <div class="text-[18px] mt-[5px]">{{ obj?.destination || '暂无' }}</div>
      </div>
    </div>
    <!--  -->
    <div class="tranport-three">
      <span class="bg-[#FFF500] text-black  h-[40px] leading-[40px]
      " style="padding: 5px 20px;font-size: 20px;font-weight: bold; border-radius: 5px;">{{ obj?.trailernum || '暂无' }}
      </span>
      <div class="boxes">
        <div>
          <span class="title">装载数量丨</span>
          <span>{{ obj?.loadauantity || 0 }} t</span>
        </div>
        <div>
          <span class="title">是否满载丨</span>
          <span v-if="obj?.isfull == 0">否</span>
          <span v-if="obj?.isfull == 1">是</span>
          <span v-else>暂无</span>
        </div>
        <div>
          <span class="title">运输证号丨</span>
          <span>{{ obj?.vehicletranlicensenum || '暂无' }}</span>
        </div>
        <div>
          <span class="title">车身颜色丨</span>
          <span>{{ obj?.vehiclecolor || '暂无' }}</span>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="tranport-four">
      <div v-for="item in fourList" :key="item.id" class="boxes">
        <div class="flex">
          <div class="title w-[100px]">{{ item.title }}</div>
          <div style="color: rgba(255, 255, 255, 0.8)">{{ item.name }}</div>
        </div>
        <div>
          <span style="color: rgba(255, 255, 255, 0.8)">{{ item.tel }}</span>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="tranport-five">
      <h2 style="color:aqua">应急处置方案丨</h2>
      <div class="content">
        {{ obj?.disposalproject || '暂无' }}</div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { useBusinessStore } from '@/store';
const store = useBusinessStore()

const obj: any = ref({})
watch(() => store.transportCodeInfo, (newVal, oldValue) => {
  obj.value = newVal
}, { immediate: true })
const fourList = ref([
  {
    id: 0,
    title: '托运单位',
    name: obj?.shippingcompany || '暂无',
    tel: obj?.shippertelephone || '暂无',
  },
  {
    id: 1,
    title: '收货单位',
    name: obj?.receivingcompany || '暂无',
    tel: obj?.receivertelephone || '暂无',
  },
  {
    id: 2,
    title: '驾驶员',
    name: obj?.drivername || '暂无',
    tel: obj?.drivertel || '暂无',
  },
  {
    id: 3,
    title: '押运员',
    name: obj?.guardsname || '暂无',
    tel: obj?.guardstel || '暂无',
  }
])
</script>
<style lang='less' scoped>
.transport {
  height: 100%;

  .tranport_Head {
    color: #fff;
    font-weight: bolder;
    font-size: 28px;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    height: 5%;
  }

  .ydbhBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    width: 460px;
    height: 60px;
    line-height: 60px;
    background: rgba(1, 10, 15, 0.5);
  }

  .tranport-one {
    margin-top: 10px;
    padding: 10px;
    width: 460px;
    height: 180px;
    background: rgba(1, 10, 15, 0.5);
    font-size: 18px;


    .tranport-one-top {
      font-size: 20px;
      display: flex;
      justify-content: space-between;

      img {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
      }
    }

    .tranport-one-bottom {
      margin-top: 20px;
      font-size: 20px;
    }
  }

  .tranport-two {
    padding: 15px;
    padding-top: 35px;
    width: 460px;
    height: 128px;
    background: rgba(1, 10, 15, 0.5);
    margin-top: 10px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 20px;
  }

  .tranport-three {
    width: 460px;
    height: 140px;
    background: rgba(1, 10, 15, 0.5);
    margin-top: 10px;
    color: #fff;
    padding: 10px;
    font-size: 20px;

    .boxes {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      font-size: 20px;
      justify-content: space-between;

      div {
        width: 220px;
        flex-shrink: 0;
      }
    }
  }

  .tranport-four {
    width: 460px;
    height: 180px;
    background: rgba(1, 10, 15, 0.5);
    padding: 10px;
    margin-top: 10px;
    font-size: 20px;

    .boxes {
      display: flex;
      justify-content: space-between;
      color: #fff;
      align-items: center;
      margin-top: 10px;
    }
  }

  .tranport-five {
    width: 460px;
    height: 209px;
    background: rgba(1, 10, 15, 0.5);
    margin-top: 10px;
    font-size: 20px;
    padding: 10px;
    font-size: 20px;

    .content {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20px;
    }
  }

  .title {
    color: aqua;
  }
}
</style>
